<template>
	Test.vue
	<div>
		<h2>欢迎</h2>
		<div class="div">
			无限滚动
			<!-- 指令#
属性	说明	类型	可选值	默认值
v-infinite-scroll	滚动到底部时，加载更多数据	function	-	-
infinite-scroll-disabled	是否禁用	boolean	-	false
infinite-scroll-delay	节流时延，单位为ms	number	-	200
infinite-scroll-distance	触发加载的距离阈值，单位为px	number	-	0
infinite-scroll-immediate	是否立即执行加载方法，以防初始状态下内容无法撑满容器。	boolean	-	true -->
			<!-- <ul v-infinite-scroll="load" infinite-scroll-delay="200" infinite-scroll-distance="2000" infinite-scroll-immediate="false" class="infinite-list" style="overflow: auto">
				<li v-for="i in count" :key="i" class="infinite-list-item">
					{{ i }}
				</li>
			</ul> -->
		</div>
		<div class="read-con" @scroll="scrollEvent">

		</div>
		<div class="read-con" @scroll="scrollEvent">

		</div>
		<div style="height: 150px;border: 1px solid red">
			<van-sticky position="bottom" :offset-bottom="50" :container="container">
				<van-button type="warning">指定容器</van-button>
			</van-sticky>

		</div>
		<div ref="container" style="height: 1000px;border: 1px solid red">
			<van-sticky position="bottom">
				<van-button type="primary">吸底距离</van-button>
			</van-sticky>
		</div>
	</div>
</template>
<script>
	import {
		ref
	} from 'vue'
	import {
		Toast
	} from 'vant'
	export default {
		setup() {
			const container = ref(null);
			return {
				container
			};
		},
		data() {
			return {
				count: [1, 3, 32, 5],
			}
		},
		mounted() {
			window.addEventListener('scroll', this.scrollToTop)
			this.test();
		},
		watch: {
			scrollToTop() {
				var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
				console.log(scrollTop)
			},
			// scrollToTop() {
			// 	var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
			// 	console.log(scrollTop)
			// },
		},
		methods: {
			scrollEvent() {
				let _this = this
				let read = _this.$el.querySelector('#read')
				console.log(read.scrollToTop)
			},
			load() {
				// alert("this.count="+this.count)
				// this.count+=0;
				alert(this.count);
				Toast(0);
				console.log("count=" + this.count);
			},
			test() {
				this.$axios.get('/dishes/test')
					.then(res => {
						console.log("res" + res.msg);
					})
			}
		}
	};
</script>
<style scoped>
	.div {
		height: 1000px;
		/* border: 1px solid red */
	}
</style>
123



<template>
	<div>
		infiniteScroll 
		
		<h2>欢迎</h2>
		<div class="div">
			无限滚动
			<!-- 指令#
属性	说明	类型	可选值	默认值
v-infinite-scroll	滚动到底部时，加载更多数据	function	-	-
infinite-scroll-disabled	是否禁用	boolean	-	false
infinite-scroll-delay	节流时延，单位为ms	number	-	200
infinite-scroll-distance	触发加载的距离阈值，单位为px	number	-	0
infinite-scroll-immediate	是否立即执行加载方法，以防初始状态下内容无法撑满容器。	boolean	-	true -->
			<!-- <ul v-infinite-scroll="load" infinite-scroll-delay="200" infinite-scroll-distance="2000" infinite-scroll-immediate="false" class="infinite-list" style="overflow: auto">
				<li v-for="i in count" :key="i" class="infinite-list-item">
					{{ i }}
				</li>
			</ul> -->
		</div>
		<div class="read-con" @scroll="scrollEvent">

		</div>
		<div style="height: 150px;border: 1px solid red">
			<van-sticky position="bottom" :offset-bottom="50" :container="container">
				<van-button type="warning">指定容器</van-button>
			</van-sticky>

		</div>
		<div ref="container" style="height: 1000px;border: 1px solid red">
			<van-sticky position="bottom">
				<van-button type="primary">吸底距离</van-button>
			</van-sticky>
		</div>
	</div>
</template>
<script>
	import {
		ref
	} from 'vue'
	import {
		Toast
	} from 'vant'
	export default {
		setup() {
			const container = ref(null);
			return {
				container
			};
		},
		data() {
			return {
				count: [1, 3, 32, 5],
			}
		},
		mounted() {
			window.addEventListener('scroll', this.scrollToTop)
			this.test();
		},
		watch: {
			scrollToTop() {
				var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
				console.log(scrollTop)
			},
		},
		methods: {
			scrollEvent() {
				let _this = this
				let read = _this.$el.querySelector('#read')
				console.log(read.scrollToTop)
			},

			load() {
				// alert("this.count="+this.count)
				// this.count+=0;
				alert(this.count);
				Toast(0);
				console.log("count=" + this.count);
			},
			test() {
				this.$axios.get('/dishes/test')
					.then(res => {
						console.log("res" + res.msg);
					})
			}
		}
	};
</script>
<style scoped>
	.div {
		height: 1000px;
		/* border: 1px solid red */
	}
</style>
123
